<template>
	<view style="height: 1000px;">
		<button @tap="send">发送</button>
		<input type="text" v-model="question" />
		<view style="width: 100%;">
			<pre v-html="anwser"></pre>
		</view>
	</view>
</template>


<script>
	import {
		genMessage
	} from "../../api/robot/robot.js"
	import {
		RuntimeServerUrl
	} from "../../commons/getRuntimeEnv.js"
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	export default {
		data() {
			return {
				text: 'uni-app',
				voicePath: '',
				eventSource: '',
				question: "",
				anwser: "",
				questionList: [{
						role: 'user',
						content: "我是一个大四的学生，我要学习js",
					},
					{
						role: 'assistant',
						content: "学习JavaScript（JS）是一项非常有用的技能，因为它是Web开发的关键语言之一。以下是一些建议，帮助你开始学习JavaScript： 基础知识：了解编程基础，如变量、数据类型、条件语句、循环等。一些推荐的资源包括：   - MDN Web Docs（Mozilla开发者网络文档）info   - freeCodeCamp（免费在线课程） 实践项目：通过实际项目来巩固所学知识。可以从简单的任务开始，如制作一个待办事项列表或计算器，然后逐渐尝试更复杂的项目。这将使你能够更快地构建复杂的应用程序。5. 加入社区：参与在线论坛、GitHub项目或其他开发者社区，以便与其他学习者互动并获取帮助。 持续学习和实践：编程是一个不断学习的过程。保持对新技术和最佳实践的关注，并不断练习以提高你的技能。祝你学习JavaScript顺利！",
					}
				]
			}
		},
		onLoad() {
			let self = this;
			recorderManager.onStop(function(res) {
				console.log('recorder stop' + JSON.stringify(res));
				self.voicePath = res.tempFilePath;
			});
		},
		methods: {
			send() {
				const url = new URL("/gen", RuntimeServerUrl)
				url.searchParams.set("prompt", JSON.stringify([{
					role: 'user',
					content: "",
				}, {
					role: 'assistant',
					content: "学习JavaScript（JS）是一项非常有用的技能，因为它是Web开发的关键语言之一。以下是一些建议，帮助你开始学习JavaScript： 基础知识：了解编程基础，如变量、数据类型、条件语句、循环等。一些推荐的资源包括：   - MDN Web Docs（Mozilla开发者网络文档）info   - freeCodeCamp（免费在线课程） 实践项目：通过实际项目来巩固所学知识。可以从简单的任务开始，如制作一个待办事项列表或计算器，然后逐渐尝试更复杂的项目。这将使你能够更快地构建复杂的应用程序。5. 加入社区：参与在线论坛、GitHub项目或其他开发者社区，以便与其他学习者互动并获取帮助。 持续学习和实践：编程是一个不断学习的过程。保持对新技术和最佳实践的关注，并不断练习以提高你的技能。祝你学习JavaScript顺利！",
				}, {
					role: 'user',
					content: "基础知识包括哪些？",
				}, ]))
				url.searchParams.set("userId", "6379ef771bcddf8551c393b1")
				this.eventSource = new EventSource(url)
				this.eventSource.addEventListener('message', (event) => {
					console.log("message", event);
					console.log("message", event.data);
					if (event.data != "DONE") {
						this.anwser += event.data
					} else {
						this.eventSource.close()
					}
				});

				// 监听 error 事件，处理连接错误
				this.eventSource.addEventListener('error', function(error) {
					console.error('EventSource encountered an error:', error);
				});
				this.eventSource.addEventListener('close', function() {
					console.log('close');
				});
			},
			close() {
				this.eventSource.colse()
			}
		}
	}
</script>

<style lang="scss">
	#map {
		float: left;
		border: 1px solid red;
		// position: absolute;
		// bottom: 0px;

		// right: 0px;
	}

	.scroll-Y {
		height: 1000rpx;
		background-color: red;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
</style>